/**
 * create by young (young2f@outlook.com) on 2020/9/16
 */


'use strict';
import React from 'react';
import {Button, Form, Input, InputNumber, Modal, notification, Select} from 'antd';

import FormBase from '../../../components/Base/FormBase';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';
import {FormField, FormLayout, ModalFooter} from "antd-extra";
import notify from "../../../components/NotificationExtra";
import UploadPic from "../../../components/UploadPic";

moment.locale('zh-cn');
const table = 'SalesOrder';
@Form.create()
@connect(({
            user,
            global,
            dynamicLabel,
            material,
            store
          }) => ({...user, ...material, ...dynamicLabel, ...global, ...store}))
export default class ModalCreateOrEditRentProd extends FormBase {
  constructor(props) {
    super(props);
    this.state = undefined;
  }

  componentDidMount() {

  }

  renderFoot = () => {
    const {foot, value, modalRef, form, callback} = this.props;

    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            const {modalRef} = this.props;
            form.validateFields((err, values) => {
              if (err) {
                const {code} = err;
                const {errors} = code;
                errors.forEach(item => {
                  notification.error(item);
                });
                return;
              }
              const {invoicingDate} = values;
              if (invoicingDate) {
                values.invoicingDate = moment(invoicingDate).valueOf();
              }

              const {addMaterials = [], fileList = []} = this.state;
              if (fileList.length === 0) {
                notify({type: 'error', message: "请上传包装标识"});
                return;
              }

              values.fileList = fileList;

              callback(values);
              modalRef.close();
            });
          }}>确定</Button>

          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      );
    }
  };
  picHandleCancel = () => this.setState({previewVisible: false});

  render() {
    const {form, values, cols = 3} = this.props;
    if (this.state === undefined || this.state === null) {
      this.state = {...values};
      this.state.addMaterials = values && values.materials ? values.materials : [];
    }
    const {previewVisible, previewImage, fileList = []} = this.state;
    const model = this.props[`${table}Model`];
    if (!model) return;

    const {
      prodName,
      prodCode,
      price = 0,
      count = 0,
      pkgFee = 0,
      laborFee = 0,
      taxDeductionPointForLaborCosts = 0,

      deliverWay,
      unit,
      label,
      pkg

    } = this.state;
    const amount = price * count;
    return (
      <div>
        <UploadPic title={'标签样式'} fileList={fileList} callback={f => this.state.fileList = f.fileList}></UploadPic>

        <FormLayout form={form} cols={cols}>
          <FormField
            label={'品名'}
            name={'prodName'}
            required={true}
            initialValue={prodName}
          >
            <Input style={{width: '100%'}}></Input>
          </FormField>
          <FormField
            label={'编号'}
            name={'prodCode'}
            required={true}
            initialValue={prodCode}
          >
            <Input style={{width: '100%'}}></Input>
          </FormField>
          <FormField
            label={'数量'}
            name={'count'}
            required={true}
            initialValue={count}
          >
            <InputNumber onChange={v => {
              this.state.count = v;
              this.componentDidMount();
            }}  style={{width: '100%'}}
            ></InputNumber>
          </FormField>
          <FormField
            label={'单位'}
            name={'unit'}
            initialValue={unit}
          >
            <Input style={{width: '100%'}}
            ></Input>
          </FormField>
          <FormField
            label={'单价'}
            name={'price'}
            required={true}
            initialValue={price}
          >
            <InputNumber onChange={(v) => {
              this.state.price = v;
              this.componentDidMount();
              // const values = form.getFieldsValue();
              // const {price = 0, count = 0} = values;
              // const amount = price * count;
              // form.setFieldsValue({amount});
              // this.state.price = v;
              // this.componentDidMount();
            }} style={{width: '100%'}}
            ></InputNumber>
          </FormField>
          <FormField
            label={'金额'}
            name={'amount'}
            initialValue={amount}
          >
            <InputNumber disabled style={{width: '100%'}}
            ></InputNumber>
          </FormField>
          <FormField
            label={'标签'}
            name={'label'} initialValue={label}
          >
            <Input style={{width: '100%'}}></Input>
          </FormField>
          <FormField
            label={'包装'}
            name={'pkg'} initialValue={pkg}
          >
            <Input style={{width: '100%'}}></Input>
          </FormField>
          <FormField
            label={'包装费用'}
            name={'pkgFee'} initialValue={pkgFee}
          >
            <InputNumber style={{width: '100%'}}
            ></InputNumber>
          </FormField>
          <FormField
            label={'项目奖励'}
            name={'laborFee'}
            initialValue={laborFee}
          >
            <InputNumber style={{width: '100%'}}></InputNumber>
          </FormField>
          <FormField
            label={'劳务扣税金额'}
            name={'taxDeductionPointForLaborCosts'}
            initialValue={taxDeductionPointForLaborCosts}
          >
            <InputNumber style={{width: '100%'}}></InputNumber>
          </FormField>
          <FormField
            label={'发货方式'}
            name={'deliverWay'} initialValue={deliverWay}
          >
            <Select style={{width: '100%'}}>
              {this.getSelectOption(model && model.deliverWay ? model.deliverWay.options : [])}
            </Select>
          </FormField>

        </FormLayout>

        <Modal visible={previewVisible} footer={null} onCancel={this.picHandleCancel}>
          <img alt="example" style={{width: '100%'}} src={previewImage}/>
        </Modal>
        {
          this.renderFoot()
        }
      </div>

    );
  }
}

